<template>
    <div class="photoinfo-container">
        <h1>{{ photoinfo.title }}</h1>
        <p class="con-substr">
            <span class="time">发表时间:{{ photoinfo.add_time | dataFormat }}</span>
            <span class="click">点击:{{ photoinfo.click }}次</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
             <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="handleClose()" :key="item.src">
        </div>
        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>
        <comment :id="id"></comment>
    </div>
</template>

<script>
import Comment from "../comment/Comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      list: [
        {
          src:
            "http://img4.imgtn.bdimg.com/it/u=1786893788,3984651270&fm=27&gp=0.jpg",
          w: 600,
          h: 300
        },
        {
          src:
            "http://img2.imgtn.bdimg.com/it/u=820421501,1148335557&fm=27&gp=0.jpg",
          w: 600,
          h: 300
        },
        {
          src:
            "http://img0.imgtn.bdimg.com/it/u=1525168485,983313765&fm=27&gp=0.jpg",
          w: 600,
          h: 300
        },
        {
          src:
            "http://img1.imgtn.bdimg.com/it/u=3121148624,785405549&fm=27&gp=0.jpg",
          w: 600,
          h: 300
        }
      ]
    };
  },
  created() {
    this.getImgInfo();
    // this.getThumbs()
  },
  methods: {
    getImgInfo() {
      // 获取到对应图片详情信息
      this.$http.get(`api/getimageInfo/${this.id}`).then(res => {
        if (res.body.status === 0) {
          this.photoinfo = res.body.message[0];
        }
      });
    },
    getThumbs() {
      // 获取缩略图
      this.$http.get(`api/getthumimages/${this.id}`).then(res => {
        if (res.body.status === 0) {
          // 循环每个图片数据，补全图片的宽和高
          res.body.message.forEach(item => {
            item.w = 600;
            item.h = 400;
          });
          this.list = res.body.message;
        }
      });
    },
    imgChange() {
      
    }
  },
  components: {
    Comment
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 5px 5px;
    background-color:white;
    h1{
        text-align: center;
        font-size: 15px;
        color: #226f22;
        margin: 10px auto;
    }
    .con-substr{
        display: flex;
        justify-content:space-between;
        font-size: 13px;
    }
    .thumbs{
        width:100%;
        height:220px;
        padding: 0 2px;
        .preview-img{
            float: left;
            width: 48%;
            margin-top: 8px;
            margin-left: 5px;
            box-shadow: 0 0 10px black;
        }
    }
    .content{
            font-size: 13px;
            line-height: 30px;
            margin-bottom: 5px;
        }
}
</style>
